<template>	
	<div>
		<city-header></city-header>
		<city-search :cities ="cities"></city-search>
		<city-list 
		:cities = "cities" 
		:hot ="hotCities"
		:letter = "letter"
		></city-list>
		<city-alphabet 
		@change = "handleLetterChange" 
		:cities = "cities"
		></city-alphabet>
	</div>	
</template>
<script>
	import CityHeader from './components/header'
	import CitySearch from './components/search'
	import CityList from './components/list'
	import CityAlphabet from './components/alphabet'
	import axios from 'axios'
	export default {
		name: "City",
		components:{
			CityHeader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		data:function(){
			return{
				cities:{},
				hotCities:[],
				letter:""
			}
		},
		methods:{
			getCityInfo:function(){
				axios.get("/api/city.json")
				.then(this.handleGetCityInfo)
			},
			handleGetCityInfo:function(data){				
				data = data.data
				console.log(data)
				if(data.ret&&data.data){
					var res = data.data
					this.cities = res.cities
					this.hotCities = res.hotCities
				}
			},
			handleLetterChange:function(letter){
				this.letter = letter
			}
		},
		mounted:function(){
			this.getCityInfo()
		}
	}
</script>

<style lang="stylus" scoped>
	
</style>